<template>
  <div class="div">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item>职工管理</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/index/user/add' }">职工新增</el-breadcrumb-item>
    </el-breadcrumb>
    <el-row class="margintop20">
      <el-col :span="10" class="margintop20">
        <el-form :model="form" :rules="rules" ref="myForm" label-width="100px" class="myform">
          <el-form-item label="手机号码：" prop="mobile">
            <el-input v-model="form.mobile"></el-input>
          </el-form-item>
          <el-form-item label="登录密码：" prop="password">
            <el-input type="password" v-model="form.password" show-password></el-input>
          </el-form-item>
          <el-form-item label="底薪：" prop="money">
            <el-input v-model="form.money"></el-input>
          </el-form-item>
          <el-form-item label="角色：" prop="roleid">
            <el-select v-model="form.roleid">
              <el-option
                v-for="(role,i) in roleList"
                :key="i"
                :label="role.label"
                :value="role.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="状态：" prop="status">
            <el-select v-model="form.status">
              <el-option
                v-for="(role,i) in statusList"
                :key="i"
                :label="role.label"
                :value="role.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="入职时间：" prop="entry">
            <el-col :span="11">
              <el-date-picker
                type="date"
                placeholder="选择日期"
                v-model="form.entry"
                style="width: 100%;"
              ></el-date-picker>
            </el-col>
          </el-form-item>
          <el-form-item label="昵称：" prop="username">
            <el-input v-model="form.username"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="info" class="width100" @click="addForm" size="mini">添加</el-button>
            <el-button type="danger" class="width100" @click="resetFrom" size="mini">重置</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { adduser } from "@/api";
import { roleList, statusList } from "@/utils";
export default {
  data() {
    return {
      form: {
        username: "真实姓名",
        password: "abc123",
      },
      roleList,
      statusList,
      rules: {
        // 表单校验   正则
        mobile: [
          { required: true, message: "请输入手机号码", trigger: "blur" },
          {
            validator: function (rule, value, callback) {
              var mobileReg = /^1(3|5|6|7|8|9)\d{9}$/;
              if (mobileReg.test(value)) {
                callback();
              } else {
                callback(new Error("请输入正确的手机号"));
              }
            },
            trigger: "change",
          },
        ],
        password: [
          //失去焦点触发
          { required: true, message: "请输入登录密码", trigger: "blur" },
          {
            validator: function (rule, value, callback) {
              var passReg = /^[A-Za-z0-9]\w{3,12}$/;
              if (value.length < 4) {
                callback(new Error("密码长度至少4位"));
              } else if (value.length > 12) {
                callback(new Error("密码长度最多12位"));
              } else if (!passReg.test(value)) {
                callback(new Error("请输入正确格式的密码"));
              } else {
                callback();
              }
            },
            trigger: "change",
          },
        ],
        money: [
          {
            validator: function (rule, value, callback) {
              var passReg = /^[0-9]*$/;
              if (!passReg.test(value)) {
                callback(new Error("请输入正确格式的密码"));
              } else {
                callback();
              }
            },
            trigger: "change",
          },
        ],
        roleid: [
          { required: true, message: "请选择用户角色类型", trigger: "change" },
        ],
        status: [
          { required: true, message: "请选择用户状态", trigger: "change" },
        ],
        entry: [
          { required: true, message: "请选择入职时间", trigger: "change" },
        ],
        username: [{ required: true, message: "请输入昵称", trigger: "blur" }],
      },
    };
  },
  methods: {
    addForm() {
      this.$refs.myForm.validate((valid) => {
        if (valid) {
          adduser(this.form).then((res) => {
            if (res.type) {
              this.$router.push({ name: "userlist" });
            }
          });
        }
      });
    },
    resetFrom() {
      this.$refs.myForm.resetFields();
    },
  },
};
</script>


<style scoped>
.margintop20 {
  background: #fff;
}
.el-breadcrumb-item {
  font-size: 20px;
}
</style>